<template>
  <div class="com-card box-shadow">
    <header
      :style="type == 2 ? {background: '#308AE7', 'border-color': '#308AE7', color: '#fff'} : {}"
    >
      <div>{{ title }}</div>
      <slot name="func"></slot>
    </header>
    <main :style="{'min-height': height + 'px', padding: noPadding ? '0' : ''}">
      <slot>无数据...</slot>
    </main>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    height: {
      type: [Number, String],
      default: "auto"
    },
    type: {
      type: [Number, String],
      default: 1
    },
    noPadding: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    getContentHeight() {
      return this.$el.getElementsByTagName("main")[0].clientHeight - 32;
    }
  }
};
</script>

<style lang="scss" scoped>
.com-card {
  background: #fff;
  border-radius: 8px;
  color: #333;
  display: flex;
  flex-direction: column;
  flex: 1;
}
header {
  padding: 16px;
  height: 48px;
  background: rgba(249, 249, 249, 1);
  border-radius: 8px 8px 0px 0px;
  box-sizing: border-box;
  border-left: 8px solid #40e0ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
main {
  position: relative;
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0px;
}
</style>
